<template>
  <div
    class="modify"
    ref="homePage"
  >
    <div class="modify-top">
      <div
        class="modify-top-t"
        @click="click('userp')"
      >
        <div class="head">
          头像
        </div>
        <div class="top-r">
          <div class="img">
            <img
              :src="allshu.cover"
              class="pic"
            />
          </div>
          <div class="arrow">
            <img src="http://o6wndwjxn.qnssl.com/64ce8201901091414585351.svg" />
          </div>
        </div>
      </div>
      <div
        class="modify-top-c"
        @click="click('nickname')"
      >
        <div class="name">
          昵称
        </div>
        <div class="top-r">
          <div class="lighttext">{{allshu.nick_name}}</div>
          <div class="arrow">
            <img src="http://o6wndwjxn.qnssl.com/64ce8201901091414585351.svg" />
          </div>
        </div>
      </div>
      <div class="modify-top-b">
        <div class="head">
          知运号
        </div>
        <div class="top-r">
          <div class="lighttext">
            {{allshu.zhiyun}}
          </div>
        </div>
      </div>
    </div>
    <div class="modify-bottom">
      <div
        class="modify-top-c"
        @click="click('wechatnumber')"
      >
        <div class="name">
          微信号
        </div>
        <div class="top-r">
          <div
            class="lighttext"
            v-if="allshu.wx"
          >
            {{allshu.wx}}
          </div>
          <div class="arrow">
            <img src="http://o6wndwjxn.qnssl.com/64ce8201901091414585351.svg" />
          </div>
        </div>
      </div>
      <div
        class="modify-top-c"
        @click="click(allshu.phone ? 'bindtel' : 'gettel')"
      >
        <div class="name">
          手机号码
        </div>
        <div class="top-r">
          <div
            class="lighttext"
            v-if="allshu.phone"
          >
            {{allshu.phone}}
          </div>
          <div
            class="lighttext"
            v-else
          >
            未绑定
          </div>
          <!-- 绑定的 -->
          <div class="arrow">
            <img src="http://o6wndwjxn.qnssl.com/64ce8201901091414585351.svg" />
          </div>
        </div>
      </div>
      <div
        class="modify-top-c"
        @click="click('email')"
      >
        <div class="name">
          邮箱
        </div>
        <div class="top-r">
          <div
            class="lighttext"
            v-if="allshu.youxiang"
          >
            {{allshu.youxiang}}
          </div>
          <div
            class="lighttext"
            v-else
          >
            未设置
          </div>
          <div class="arrow">
            <img src="http://o6wndwjxn.qnssl.com/64ce8201901091414585351.svg" />
          </div>
        </div>
      </div>
    </div>

    <!-- 弹窗弹窗 -->

    <!-- 更换头像更换头像更换头像 -->
    <div
      class="tanbox"
      v-if="appear=='userp'"
    >
      <div
        class="tan"
        style="height: 266px;"
      >
        <form
          method="post"
          id="myForm"
          @submit.prevent="submit"
        >
          <div class="tan-tit">
            头像
          </div>
          <div class="headerto">
            <label for="tu">
              <div class="header">
                <img
                  :src="allshu.cover"
                  id="pic"
                />
              </div>
              <div>点击上传图片</div>
            </label>
            <input
              class="upload"
              style=" visibility: hidden;"
              @change='add_img'
              type="file"
              id="tu"
            >
          </div>
          <div class="tan-btn-button">
            <div @click="exit('headimg')">取消</div>
            <button type="submit">确定</button>
          </div>
        </form>
      </div>
    </div>
    <!-- 更换头像更换头像更换头像 -->

    <!-- 昵称修改昵称修改-->
    <div
      class="tanbox"
      v-if="appear=='nickname'"
      @click.self="modify_off"
    >
      <div class="tan">
        <div class="tan-tit">
          昵称
        </div>
        <div class="tan-content">
          <input
            :placeholder='allshu.nick_name'
            v-model="modify_name"
            maxlength="15"
          />
        </div>
        <div class="tan-btn-button">
          <div @click="exit">取消</div>
          <button
            type="submit"
            @click="goon(1,modify_name)"
          >确定</button>
        </div>
      </div>
    </div>
    <!-- 昵称修改昵称修改-->

    <!-- 微信号微信号微信号 -->
    <div
      class="tanbox"
      v-if="appear=='wechatnumber'"
      @click.self="modify_off"
    >
      <div class="tan">
        <div class="tan-tit">
          微信号
        </div>
        <div class="tan-content">
          <!-- 判断 -->
          <input
            v-if="allshu.wx == null"
            placeholder="请填写微信号"
            v-model="modify_wxh"
          />
          <input
            v-else
            :placeholder="allshu.wx"
            v-model="modify_wxh"
          />

        </div>
        <div class="tan-btn-button">
          <div @click="exit">取消</div>
          <button
            type="submit"
            @click="goon(2,modify_wxh)"
          >确定</button>
        </div>
      </div>
    </div>
    <!-- 微信号微信号微信号 -->

    <!-- 绑定手机号绑定手机号 -->
    <div
      class="tanbox"
      v-if="appear=='bindtel'"
      @click.self="modify_off"
    >
      <div
        class="tan"
        style=" height: 158px;"
      >
        <div class="tan-tit">
          已绑定手机号
        </div>
        <div class="bindtel">
          绑定的手机号：{{allshu.phone}}
        </div>
        <div
          class="tan-changetel"
          @click="ghphone"
        >
          更换手机号
        </div>
      </div>
    </div>
    <!-- 绑定手机号绑定手机号 -->

    <!-- 获取手机号码获取手机号码 -->
    <div
      class="tanbox"
      v-if="appear=='gettel'"
    >
      <div
        class="tan"
        style="height: 230px;"
      >
        <div class="tan-tit">
          手机号码
        </div>
        <div class="tan-content">
          <!-- onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)" onblur="this.v();" -->
          <input
            placeholder="请输入手机号码"
            :disabled="input_phone"
            type='tel'
            v-model="modify_phone"
            maxlength="11"
          />
        </div>
        <div class="tan-content tan-code">
          <input
            placeholder="请输入验证码"
            type='tel'
            v-model="modify_yzm"
            maxlength="6"
          />
          <div
            v-if="waitstatus"
            class="getcode"
            @click="getyzm(modify_phone)"
          >{{phonetext}}</div>
          <div
            v-else
            class="waitcode"
          >{{phonetext}}</div>
        </div>
        <!-- <div class="tan-changetel" @click="save(modify_yzm)">
					保存
				</div> -->
        <div class="tan-btn-button">
          <div @click="exit">取消</div>
          <button
            type="submit"
            @click="save(modify_yzm)"
          >保存</button>
        </div>
      </div>
    </div>
    <!-- 获取手机号码获取手机号码 -->

    <!-- 邮箱邮箱邮箱邮箱 -->
    <div
      class="tanbox"
      v-if="appear=='email'"
      @click.self="modify_off"
    >
      <div class="tan">
        <div class="tan-tit">
          邮箱
        </div>
        <div class="tan-content">
          <input
            v-if='allshu.youxiang'
            :placeholder="allshu.youxiang"
            v-model="modify_email"
          />
          <input
            v-else
            placeholder="请输入邮箱账号"
            v-model="modify_email"
          />
        </div>
        <div class="tan-btn">
          <div class="tan-btn-button">
            <div @click="exit">取消</div>
            <button
              type="submit"
              @click="goon(3,modify_email)"
            >确定</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 邮箱邮箱邮箱邮箱 -->
    <!-- 弹窗提示 -->
    <div
      class="modify_Tips"
      v-show="showPositionValue"
      @click="modify_tips_click"
    >
      <Tips :type='tipstext'></Tips>
    </div>
  </div>
  <!-- </div> -->
</template>

<script>
import axios from 'axios'
import { code, bandphone, addInformation, personupload } from '@/api/center'
import { information } from '@/api/assemble'
import Tips from '@/components/public/Tips.vue'
export default {
  components: {
    Tips
  },
  data () {
    return {
      waitstatus: true,
      timeout: 60,
      input_phone: false,
      phonetext: '获取验证码',
      showPositionValue: false, // 是否显示提示
      position: 'center', // 提示信息的位置
      tipstext: '', // 提示文本
      wodephoto: 'http://o6wndwjxn.qnssl.com/1664b201807131559169434.png',
      loading: true,
      clientHeight: '',
      user: {},
      appear: '',
      imgs: [],
      files: '',
      allshu: {
        cover: '',
        nick_name: ''
      },
      imgData: {
        accept: 'image/gif, image/jpeg, image/png, image/jpg,image/svg'
      },
      bendiimgurl: '',
      modify_name: '',
      modify_wxh: '',
      modify_phone: '',
      modify_email: '',
      modify_yzm: ''
    }
  },
  created () {
    this.inner()
  },
  mounted () {
    // 获取浏览器可视区域高度
    this.clientHeight = `${document.documentElement.clientHeight}` // document.body.clientWidth;
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
  },
  watch: {
    clientHeight: function () {
      this.changeFixed(this.clientHeight)
    },
    appear (val) {
      this.$nextTick(() => {
        console.log(val)
        if ((val !== 'userp' && val !== 'bindtel' && val !== '' && val !== 'gettel')) {
          document.getElementsByClassName('tan')[0].style.height = 168 + 'px'
        }
      })
    }
  },
  methods: {
    ghphone () {
      this.appear = 'gettel'
    },
    modify_off () {
      this.appear = ''
      this.tipstext = ''
    },
    modify_tips_click () {
      this.showPositionValue = false
    },
    changeFixed (clientHeight) { // 动态修改样式
      // console.log(clientHeight)
      this.$refs.homePage.style.height = clientHeight + 'px'
    },
    switchStatus (e) {
      this.showPositionValue = true
      this.toastText = e
    },
    inner () {
      let pasme = {
        'app_id': this.$store.state.app_id,
        'member_id': this.$store.state.member_id
      }
      // axios.post('http://web.zhiyunzaixian.com',
      information(pasme).then(res => {
        this.$store.commit('updateLoadingStatus', { isLoading: false })
        let {
          code,
          data
        } = res.data
        if (code == 200) {
          this.allshu = data
          // this.allshu.phone = 123
          // console.log(this.allshu)
        }
      })
    },
    add_img (event) {
      console.log(event, 460)
      var files = event.target.files[0]
      var url = URL.createObjectURL(files)
      console.log(url, 463)
      let type = files.type // 文件的类型，判断是否是图片
      let size = files.size // 文件的大小，判断图片的大小
      // console.log(type)
      if (this.imgData.accept.indexOf(type) == -1) {
        this.switchStatus('请选择我们支持的图片格式！')
        return false
      }
      if (size > 1024000) {
        this.switchStatus('请选择1M以内的图片！')
        return false
      }
      this.allshu.cover = url
      this.files = files
      this.bendiimgurl = files.path
    },
    click (e) {
      // console.log(e)
      this.appear = e
      // 各类弹窗
    },
    exit (e) {
      this.appear = ''
      switch (e) {
        case 'headimg':
          this.inner()
          break
      }
    },
    getyzm (e) {
      if (e.length < 11) {
        this.tipstext = '手机号长度不足'
        this.showPositionValue = true
        return
      } else if (e == this.allshu.phone) {
        this.tipstext = '手机号已绑定'
        this.showPositionValue = true
        return
      } else {
        var re = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
        if (!re.test(e)) {
          this.tipstext = '请输入正确手机号码'
          this.showPositionValue = true
          return
        }
      }
      let requery = {
        app_id: this.$store.state.app_id,
        member_id: this.$store.state.member_id,
        tel: e,
        title: 5
      }
      code(requery).then(res => {
        let { code, data, msg } = res.data
        this.showPositionValue = true
        if (code == 200) {
          this.input_phone = true
          this.tipstext = data
          this.waitstatus = false
          this.gettime()
        } else {
          this.tipstext = msg
        }
      })
    },
    // 倒计时
    gettime () {
      if (this.timeout > 0) {
        setTimeout(() => {
          this.timeout--
          this.phonetext = '重新发送' + this.timeout + 's'
          this.gettime()
        }, 1000)
      } else {
        this.modify_yzm = ''
        this.input_phone = false
        this.waitstatus = true
        this.timeout = 60
        this.phonetext = '重新发送'
      }
    },
    save (e) {
      this.appear = ''
      let requery = {
        app_id: this.$store.state.app_id,
        member_id: this.$store.state.member_id,
        phone: this.modify_phone,
        code: e
      }
      bandphone(requery).then(res => {
        let { code, data, msg } = res.data
        this.inner()
      })
    },
    // 上传图片
    submit () {
      this.$nextTick(() => {
        document.getElementById('tu').value = ''
      })
      if (document.getElementById('tu').value === '') {
        this.$vux.alert.show({
          title: '提示',
          content: '请上传'
        })
        return false
      } else {
        this.$vux.loading.show({
          text: '上传中'
        })
      }
      if (this.bendiimgurl != '') {
        let formData = new FormData()
        formData.append('app_id', this.$store.state.app_id)
        formData.append('member_id', this.$store.state.member_id)
        formData.append('file', this.files)
        // let formData = {
        //   app_id: this.$store.state.app_id,
        //   member_id: this.$store.state.member_id,
        //   file: this.files
        // }
        //  personupload(
        // axios.post('api/information/shopshop/personupload',
        personupload(formData).then(res => {
          let {
            code,
            data
          } = res.data
          if (code == 200) {
            this.$vux.loading.hide()
            this.appear = ''
          } else {
            this.$vux.alert.show({
              title: '提示',
              content: '上传失败请重新上传'
            })
          }
        })
      } else {
        this.switchStatus('请选择图片')
      }
    },
    goon (index, e) {
      this.modify_name = ''
      this.modify_wxh = ''
      this.modify_phone = ''
      this.modify_email = ''
      this.modify_yzm = ''
      if (index == 1) {
        if (e == this.allshu.nick_name) {
          this.tipstext = '没有修改'
          this.showPositionValue = true
          return
        } else if (e == '') {
          this.tipstext = '您还没有输入'
          this.showPositionValue = true
          return
        }
      } else if (index == 2) {
        if (e == this.allshu.wx) {
          this.tipstext = '没有修改'
          this.showPositionValue = true
          return
        } else if (e == '') {
          this.tipstext = '您还没有输入'
          this.showPositionValue = true
          return
        }
      } else if (index == 3) {
        var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
        if (e == this.allshu.youxiang) {
          this.tipstext = '没有修改'
          this.showPositionValue = true
          return
        } else if (e == '') {
          this.tipstext = '您还没有输入'
          this.showPositionValue = true
          return
        } else {
          if (!re.test(e)) {
            this.tipstext = '邮箱格式有误'
            this.showPositionValue = true
            return
          }
        }
      }
      let requery = {
        app_id: this.$store.state.app_id,
        member_id: this.$store.state.member_id,
        index: index,
        text: e
      }
      addInformation(requery).then(res => {
        let {
          code,
          data,
          msg
        } = res.data
        if (code == 200) {
          this.inner()
          this.appear = ''
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.modify_Tips {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

.modify {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #1a1a1a;
  width: 100%;
  overflow: hidden;
  font-family: PingFangSC-Regular;
  font-size: 15px;
}

.modify-top {
  width: 100%;
  height: 224px;
  background: #fff;
}

.modify-top-t,
.modify-top-b {
  padding: 20px 18px;
  display: flex;
  justify-content: space-between;
}

.modify-top-t .head {
  display: flex;
  align-items: center;
}

.top-r {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-r .img {
  width: 60px;
  height: 60px;
}

.top-r .img img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

.arrow {
  display: flex;
  align-items: center;
  margin-left: 14px;
}

.arrow img {
  width: 15px;
  height: 26px;
}

.line {
  width: 100%;
  height: 1px;
  margin-left: 20px;
  background: #eeeeee;
}

.modify-top-c {
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lighttext {
  color: #b2b2b2;
  font-size: 14px;
}

.modify-bottom {
  width: 100%;
  height: 186px;
  background: #fff;
}

/* 弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗弹窗 */

.tanbox {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  left: 0;
  top: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tan {
  width: 78%;
  height: 231px;
  border-radius: 6px;
  background: #ffffff;
  font-size: 14px;
  text-align: center;
  position: relative;
}

.tan-tit {
  font-size: 18px;
  color: #1a1a1a;
  margin: 15px auto;
  font-weight: bold;
}

.tan-content {
  height: 34px;
  background: #f5f5f5;
  margin: 20px auto;
  width: 90%;
  border-radius: 4px;
}

.tan-content input {
  width: 90%;
  height: 34px;
  border: 0;
  background: #f5f5f5;
  outline: none;
}

button {
  border: none;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

.tan-btn-button {
  display: flex;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  font-size: 15px;
  height: 40px;
  border-top: solid 1px #e5e5e5;
}

.tan-btn-button > * {
  flex: 1;
}

.tan-btn-button > div {
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  border-right: solid 1px #e5e5e5;
}

.tan-btn-button > button {
  height: 40px;
  line-height: 40px;
  color: #da4131;
}

.mo_phone {
  display: flex;
}

.mo_phone > div {
  flex: 1;
  margin: 0 15px;
}

.tan-btn {
  display: flex;
  // justify-content: space-between;
}

.btn,
.mo_phone > div:nth-child(2) {
  // width: 102px;
  flex: 1;
  margin: 0 0 0 15px;
  height: 34px;
  border-radius: 4px;
  background: #f29911;
  line-height: 34px;
  color: #fff;
}

.btn1,
.mo_phone > div:nth-child(1) {
  // width: 100px;
  flex: 1;
  margin: 0 15px 0 10;
  height: 34px;
  border: 1px solid #f29911;
  border-radius: 4px;
  background: #fff;
  line-height: 34px;
  color: #f29911;
}

.bindtel {
  height: 34px;
  line-height: 34px;
  margin: 10px 0;
  color: #999;
}

.tan-changetel {
  width: 90%;
  height: 34px;
  margin: 0 auto;
  border-radius: 30px;
  line-height: 34px;
  color: #ffffff;
  background: #da4131;
  text-align: center;
}

.headerto {
  width: 120px;
  height: 130px;
  border-radius: 50%;
  line-height: 44px;
  color: #999999;
  margin: 20px auto;
}

.header img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.tan-code {
  display: flex;
  justify-content: space-between;
  background: none;
}

.tan-code input {
  width: 62%;
  height: 34px;
  border-radius: 4px;
  border: 0;
  background: #f5f5f5;
  outline: none;
  padding: 0 15px;
}

.getcode {
  width: 82px;
  height: 34px;
  border-radius: 15px;
  font-size: 12px;
  color: #ffffff;
  line-height: 34px;
  background: #da4131;
}
.waitcode {
  width: 82px;
  height: 34px;
  border: 1px solid #da4131;
  border-radius: 15px;
  background: #fff;
  line-height: 34px;
  color: #f29911;
  font-size: 12px;
}
</style>
